<!--
 * @Author: zhangweinan
 * @Date: 2022-12-06 16:17:32
 * @LastEditors: zhangweinan
 * @LastEditTime: 2022-12-07 16:29:53
 * @Description: file content
 * @FilePath: \front-end-of-task-center\src\views\enterprise\declare.vue
-->
<template>
  <div class="hy-view">
    <div class="main-content" v-if="!selectProcessInstance">
      <div class="main-box">
        <div class="main-table">
          <div class="main-table-content">
            <div class="launch-box">
              <!-- 九宫格布局 -->
              <div class="launch-list">
                <div>
                  <div class="item-box" v-for="(item, indx) in listData" :key="indx"
                    @click="handleSelect(item, indx)">
                    <div class="item common-theme" :class="indx < 3 ? 'selected' : 'unSelected'">
                      <img src="../../assets/images/data_icon1.png" />
                      <div class="item-info">
                        <p>{{ item.name }}</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 第二步，填写表单，进行流程的提交 -->
    <div v-else>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span class="el-icon-document">申请信息【{{ selectProcessInstance.name }}】</span>
          <!-- <el-button style="float: right;" type="primary" @click="selectProcessInstance = undefined">选择其它流程</el-button> -->
        </div>
        <el-col :span="16" :offset="6">
          <div>
            <parser :key="new Date().getTime()" :form-conf="detailForm" @submit="submitForm" />
          </div>
        </el-col>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span class="el-icon-picture-outline">流程图</span>
        </div>
        <my-process-viewer key="designer" v-model="bpmnXML" v-bind="bpmnControlForm" />
      </el-card>
    </div>
  </div>
</template>
<script>
import {
  getProcessDefinitionBpmnXML,
  getProcessDefinitionList,
} from "@/api/bpm/definition";
import { DICT_TYPE, getDictDatas } from "@/utils/dict";
import { decodeFields } from "@/utils/formGenerator";
import Parser from "@/components/parser";
import { createProcessInstance } from "@/api/bpm/processInstance";
export default {
  name: "ProcessInitiation",
  components: {
    Parser,
  },
  data() {
    return {
      selectProcessInstance: undefined,
      listData: [], //列表数据
      // 遮罩层
      loading: true,
      // 表格数据
      list: [],

      // 流程表单详情
      detailForm: {
        fields: [],
      },

      // BPMN 数据
      bpmnXML: null,
      bpmnControlForm: {
        prefix: "flowable",
      },

      // 数据字典
      categoryDictDatas: getDictDatas(DICT_TYPE.BPM_MODEL_CATEGORY),
    };
  },
  created() {
    // 获取列表
    this.queryListDeployment();
  },
  methods: {
    handleSelect(row, idx) {
      if (idx > 2) return;
      // 设置选择的流程
      this.selectProcessInstance = row;

      // 流程表单
      if (row.formId) {
        // 设置对应的表单
        this.detailForm = {
          ...JSON.parse(row.formConf),
          fields: decodeFields(row.formFields),
        };
        getProcessDefinitionBpmnXML(row.id).then((response) => {
          this.bpmnXML = response.data;
        });
      } else if (row.formCustomCreatePath) {
        this.$router.push({ path: row.formCustomCreatePath });
        // 这里暂时无需加载流程图，因为跳出到另外个 Tab；
      }
    },
    // 获取模型列表
    queryListDeployment() {
      getProcessDefinitionList({
        suspensionState: 1,
      }).then((response) => {
        //let newArray = response.data.splice(0, 5);
        let newArray = [
          { name: "2022年度浙江省第八批大数据应用示范企业申报" },
          { name: "2022年度浙江省隐形冠军企业申报" },
          { name: "2022年度省新材料首批次保险补偿申报" },
          { name: "2022年浙江省首批次新材料应用奖励申报" },
        ];
        let data = response.data.filter(
          (item) =>
            item.name == "2022年度生产制造方式转型示范项目" ||
            item.name == "2022年度省级产业数字化服务商申报" ||
            item.name == "2022年省级工业互联网平台创建申报"
        );
        newArray.unshift(...data);
        this.listData = newArray;
        // this.listData = newArray.map((item) => {
        //   if (item.id == "jxt-flow:59:b97357c8-7554-11ed-a49d-5254009b4feb") {
        //     item.name = "浙江省生产制造方式转型示范项目";
        //   }
        //   return item;
        // });
      });
    },
    /** 提交按钮 */
    submitForm(params) {
      if (!params) {
        return;
      }
      // 设置表单禁用
      const conf = params.conf;
      conf.disabled = true; // 表单禁用
      conf.formBtns = false; // 按钮隐藏

      // 提交表单，创建流程
      const variables = params.values;
      createProcessInstance({
        processDefinitionId: this.selectProcessInstance.id,
        variables: variables,
      })
        .then((response) => {
          this.$modal.msgSuccess("发起流程成功");
          // 关闭当前窗口
          this.$tab.closeOpenPage();
          this.$router.push("/enterprise/my");
        })
        .catch(() => {
          conf.disabled = false; // 表单开启
          conf.formBtns = true; // 按钮展示
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.hy-view {
  width: 100%;
  padding: 0px 10px;
  height: calc(100vh - 84px);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: #f0f2f5;
  overflow-y: auto;

  .main-fixed {
    float: left;
    width: 200px;
    height: 100%;
    position: relative;
    z-index: 1;
    background: #fff;

    .main-box {
      position: relative;
      height: 100%;
      border-top: 1px solid #e9e9e9;
      z-index: 1;

      .main-header {
        height: 40px;
        padding-left: 10px;
        font-size: 16px;
        line-height: 40px;
        font-weight: 400;
        color: #333;
      }

      .main-body {
        height: calc(100% - 40px);
        padding: 10px 0 0;
        border-top: 1px solid #f2f2f2;
        overflow-y: auto;
      }
    }
  }

  .main-content {
    position: relative;
    height: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background: #fff;
    padding: 10px 20px;

    .main-box {
      .main-table {
        padding-top: 0 !important;
        z-index: 2;
        width: 100%;
        height: 100%;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;

        .main-table-content {
          height: calc(100vh - 200px);
          margin-top: 20px;
          overflow: overlay;
          width: 100%;

          .launch-box {
            height: 100%;

            .launch-list {
              display: flex;
              -webkit-box-orient: vertical;
              -webkit-box-direction: normal;
              -ms-flex-direction: column;
              flex-direction: column;
              height: 9%;

              .item-box {
                cursor: pointer;
                float: left;
                width: 30%;
                margin-bottom: 20px;
                margin-right: 3.3%;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;

                .common-theme {
                  display: flex;
                  // padding: 10px 0 5px 5px !important;
                  width: 100%;
                  color: #303133;
                  background: #fff;
                  border: 1px solid #ebeef5;
                  border-radius: 2px;
                  overflow: hidden;
                  -webkit-transition: 0.3s;
                  transition: 0.3s;
                  -webkit-box-sizing: border-box !important;
                  box-sizing: border-box !important;
                  position: relative;
                  height: 160px;

                  img {
                    float: left;
                    width: 66px;
                    height: 66px;
                    margin: 40px 30px 0 50px;
                  }

                  .item-info {
                    -webkit-box-sizing: border-box;
                    box-sizing: border-box;
                    width: 220px;
                    margin-top: 20px;

                    p {
                      font-size: 20px;
                      font-family: Microsoft YaHei;
                      font-weight: bold;
                      color: #444444;
                      margin-right: 10px;
                    }
                  }
                }
              }

              // .item-box:hover {
              //   background: #337ab7;
              // }
              .selected:hover {
                background: #337ab7;

                .item-info {
                  p {
                    color: #fff;
                  }
                }
              }

              .unSelected {
                background: #f3f1f2 !important;
                // .item-info {
                //   p {
                //     color: #fff !important;
                //   }
                // }
              }
            }

            .hy_page {
              position: fixed;
              bottom: 20px;
              right: 30px;
            }
          }
        }
      }
    }
  }
}

.item {
  padding: 10px 0 5px 5px !important;
  width: 100%;
  color: #303133;
  background: #fff;
  border: 1px solid #ebeef5;
  border-radius: 2px;
  overflow: hidden;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  -webkit-box-sizing: border-box !important;
  box-sizing: border-box !important;
  position: relative;
}
</style>
<style lang="scss">
.my-process-designer {
  height: calc(100vh - 200px);
}

.box-card {
  width: 100%;
  margin-bottom: 20px;
}
</style>
